/***
 * 柱状图图表4个
 * 
 * ***/

import { nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, reactive, ref } from "vue";
import * as echarts from 'echarts'
import { init, EChartsOption } from 'echarts'
import resize from "@/utils/resize";
import { grid, fontSize } from "./chartsData"


const {
    chart,
    beforeDestroy,
    activated,
    deactivated
} = resize()



export default function () {

    /**
     * 柱状渐变
     */

    async function barSolidlist(id: string, xData: string[], xName: string, yName: string, data: number[]) {

        nextTick(() => {
            initChart(
                id,
                xData,
                xName,
                yName,
                data,

            )
        })
    }

    function initChart
        (id: string,
            xData: string[],

            xName = '',
            yName = '',
            data: any,
        ) {
        const option = {
            backgroundColor: '',
            animation: true,
            grid: {
                left: 50,
                top: grid.top,
                right: grid.right,
                bottom: '85px',
                // containLabel: true
            },
            xAxis: {
                name: xName,
                data: xData,
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(255, 255, 255, .8)',
                        width: 2
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    show: true,
                    margin: 10,
                    fontSize: fontSize.fontSizex,
                    textStyle: {
                        color: 'rgba(255, 255, 255, 1)'
                    },
                    interval: 0, // 设置为0以确保所有标签都显示，根据需要调整
                    rotate: 40
                },

            },
            yAxis: {
                name: yName,
                type: 'value',
                gridIndex: 0,
                nameTextStyle: {
                    color: "#fff",
                    nameLocation: "start",
                },
                interval: 10,
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: "dotted",
                        color: 'rgba(255, 255, 255, 1)',
                        width: 1
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(77, 128, 254, 255)'
                    }
                },
                axisLabel: {
                    show: true,
                    margin: 3,
                    fontSize: fontSize.fontSizey,
                    textStyle: {
                        color: 'rgba(255, 255, 255, 1)'
                    }
                }
            },
            tooltip: {
                trigger: 'axis',
            },
            series: [{
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(146, 225, 255, 1)'
                        }, {
                            offset: 1,
                            color: 'rgba(0, 151, 251, 0.1)'
                        }])
                    }
                },
                data: data,
                z: 10,
                zlevel: 0
            }]
        };
        // const dispose = (id: string) => {
        //   if (document.getElementById(id)) {
        //     var chart1 = echarts.init(document.getElementById(id) as HTMLElement)
        //     chart1.dispose()
        //   }
        // }
        // dispose()
        setTimeout(() => {
            const barChart = init(document.getElementById(id) as HTMLDivElement)
            // if (document.getElementById(id)) {
            //   // var chart1 = echarts.init(document.getElementById(id) as HTMLElement)
            //   barChart.dispose()
            // }
            // barChart.dispose()
            barChart.setOption(option as EChartsOption)
            window.addEventListener('resize', () => {
                barChart.resize()
            })
        }, 500)

    }
    /**
     * 柱状点状
     */
    async function barDotlist(id: string, xData: string[], xName: string, yName: string, data: number[]) {

        nextTick(() => {
            initDotChart(
                id,
                xData,
                xName,
                yName,
                data,

            )
        })
    }

    function initDotChart
        (id: string,
            xData: string[],
            yName = '',
            xName = '',
            data: any,
        ) {
        const option = {
            backgroundColor: '',
            animation: true,
            grid: {
                left: grid.left,
                top: grid.top,
                right: grid.right,
                bottom: '65px',
            },
            xAxis: {
                data: xData,
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(77, 128, 254, 255)',
                        width: 2
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#99999980'
                    }
                },
                axisLabel: {
                    show: true,
                    margin: 3,
                    fontSize: fontSize.fontSizex,
                    textStyle: {
                        color: 'rgba(0, 0, 0, 255)'
                    },
                    interval: 0, // 设置为0以确保所有标签都显示，根据需要调整
                    rotate: 40
                }
            },
            yAxis: [{
                type: 'value',
                gridIndex: 0,
                // min: 0,
                // max: 50,
                interval: 10,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#99999980',
                        width: 1
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(77, 128, 254, 255)'
                    }
                },
                axisLabel: {
                    show: true,
                    margin: 3,
                    fontSize: fontSize.fontSizey,
                    textStyle: {
                        color: 'rgba(0, 0, 0, 255)'
                    }
                }
            }],
            series: [{
                type: 'bar',
                barWidth: 5,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(146, 225, 255, 1)'
                        }, {
                            offset: 1,
                            color: 'rgba(0, 151, 251, 1)'
                        }])
                    }
                },
                data: data,
                z: 10,
                zlevel: 0
            }, {
                type: 'pictorialBar',
                itemStyle: {
                    normal: {
                        color: '#0F375F'
                    }
                },
                symbolRepeat: 'fixed',
                symbolMargin: 2,
                symbol: 'rect',
                symbolClip: true,
                symbolSize: [5, 2],
                symbolPosition: 'start',
                symbolOffset: [0, 2],
                data: data,
                width: 2,
                z: 0,
                zlevel: 1
            }],
            dataZoom: [{
                type: 'slider',
                show: false,
                xAxisIndex: [0],
                endValue: 14,
                startValue: 0
            }]
        };

        setTimeout(() => {
            const barChart = init(document.getElementById(id) as HTMLDivElement)
            barChart.setOption(option as EChartsOption)
            window.addEventListener('resize', () => {
                barChart.resize()
            })
        }, 500)


    }
    /**
     * 柱状堆叠状
     */

    async function barStacklist(id: string, xData: string[], xName: string, yName: string, data: number[]) {

        nextTick(() => {
            initStackChart(
                id,
                xData,
                xName,
                yName,
                data,

            )
        })
    }

    function initStackChart
        (id: string,
            xData: string[],
            yName = '',
            xName = '',
            data: any,
        ) {
        const option = {
            legend: {
                bottom: '5%',
                textStyle: {
                    fontSize: 20,
                    color: "rgba(0, 0, 0, 255)"
                },
                data: ["电", "水", "气"]
            },
            grid: {
                left: '3%',
                top: '5%',
                right: '4%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 0, 0, 255)'
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 0, 0, 255)'
                    }
                }
            }],
            series: [{
                name: '电',
                type: 'bar',
                stack: 'Electricity',
                emphasis: {
                    focus: 'series'
                },
                color: '#4682F1',
                data: [320, 332, 301, 334, 390, 330, 320]
            }, {
                name: '电',
                type: 'bar',
                stack: 'Electricity',
                emphasis: {
                    focus: 'series'
                },
                color: '#50B2F5',
                data: [320, 332, 301, 334, 390, 330, 320]
            }, {
                name: '电',
                type: 'bar',
                stack: 'Electricity',
                emphasis: {
                    focus: 'series'
                },
                color: '#64EEF6',
                data: [320, 332, 301, 334, 390, 330, 320]
            }, {
                name: '电',
                type: 'bar',
                stack: 'Electricity',
                emphasis: {
                    focus: 'series'
                },
                color: '#4FDE77',
                data: [320, 332, 301, 334, 390, 330, 320]
            }, {
                name: '水',
                type: 'bar',
                stack: 'Water',
                emphasis: {
                    focus: 'series'
                },
                color: '#FFD765',
                data: [150, 232, 201, 154, 190, 330, 410]
            }, {
                name: '水',
                type: 'bar',
                stack: 'Water',
                emphasis: {
                    focus: 'series'
                },
                color: '#FFB4B5',
                data: [150, 232, 201, 154, 190, 330, 410]
            }, {
                name: '气',
                type: 'bar',
                stack: 'Gas',
                emphasis: {
                    focus: 'series'
                },
                color: '#FFC014',
                data: [862, 1018, 964, 1026, 1679, 1600, 1570]
            }, {
                name: '气',
                type: 'bar',
                stack: 'Gas',
                emphasis: {
                    focus: 'series'
                },
                color: '#C69100',
                data: [862, 1018, 964, 1026, 1679, 1600, 1570]
            }]
        };

        setTimeout(() => {
            const barChart = init(document.getElementById(id) as HTMLDivElement)
            barChart.setOption(option as EChartsOption)
            window.addEventListener('resize', () => {
                barChart.resize()
            })
        }, 500)


    }


    /***
     * 
     * 柱状图多个柱子
     * **/


    async function barmultilist(id: string, xData: string[], xName: string, yName: string, data: number[]) {

        nextTick(() => {
            initmultiChart(
                id,
                xData,
                xName,
                yName,
                data,

            )
        })
    }

    function initmultiChart
        (id: string,
            xData: string[],
            yName = '',
            xName = '',
            data: any,
        ) {
        const option = {
            grid: {
                left: 30,
                top: 10,
                bottom: 30,
                right: 0
            },

            xAxis: [
                {
                    type: 'category',
                    axisTick: { show: false },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            fontSize: fontSize.fontSizex,
                            // color: 'rgba(0, 0, 0, 255)';
                            color: '#ffffff'
                        },
                        interval: 0,
                    },
                    data: ['2012', '2013', '2014', '2015', '2016']
                }
            ],
            yAxis: [
                {
                    axisLabel: {
                        textStyle: {
                            fontSize: fontSize.fontSizex,
                            // color: 'rgba(0, 0, 0, 255)';
                            color: '#ffffff'
                        },
                        interval: 0,
                    },
                    type: 'value',
                    splitLine: {
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: 'Forest',
                    type: 'bar',
                    barGap: 0,
                    // label: 'a',
                    barWidth: 20,
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        color: 'rgba(146, 225, 255, 1)'

                    },
                    data: [320, 332, 301, 334, 390]
                },
                {
                    name: 'Steppe',
                    type: 'bar',
                    // label: '',
                    barWidth: 20,
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        color: '#4AC8FF'
                    },
                    data: [220, 182, 191, 234, 290]
                }
            ]
        };
        // const dispose = (id: string) => {
        //   if (document.getElementById(id)) {
        //     var chart1 = echarts.init(document.getElementById(id) as HTMLElement)
        //     chart1.dispose()
        //   }
        // }
        // dispose()
        setTimeout(() => {
            const barChart = init(document.getElementById(id) as HTMLDivElement)
            // if (document.getElementById(id)) {
            //   // var chart1 = echarts.init(document.getElementById(id) as HTMLElement)
            //   barChart.dispose()
            // }
            // barChart.dispose()
            barChart.setOption(option as EChartsOption)
            window.addEventListener('resize', () => {
                barChart.resize()
            })
        }, 500)

    }





    function resetCharts(id: string) {
        const option = {
            xAxis: {
                type: "category",
                name: '',

                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    margin: 20,
                    color: '#666',
                    interval: 0,
                    rotate: 15,
                    fontSize: 12,

                },

                z: 10
            },
            yAxis: {
                name: '',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#666'
                }
            },
            series: [] as unknown[],
        };
        dispose(id)
        setTimeout(() => {
            const barChart = init(document.getElementById(id) as HTMLDivElement)
            // if (document.getElementById(id)) {
            //   // var chart1 = echarts.init(document.getElementById(id) as HTMLElement)
            //   barChart.dispose()
            // }
            // barChart.dispose()
            barChart.setOption(option as EChartsOption)
            window.addEventListener('resize', () => {
                barChart.resize()
            })
        }, 100)
    }
    const dispose = (id: string) => {
        if (document.getElementById(id)) {
            var chart1 = echarts.init(document.getElementById(id) as HTMLElement)
            chart1.dispose()
        }
    }


    return {
        barmultilist,
        barSolidlist,
        barDotlist,
        initChart,
        barStacklist,
        // bararealist,
        resetCharts
    }
}
onBeforeUnmount(() => {
    beforeDestroy()
})

onActivated(() => {
    activated()
})

onDeactivated(() => {
    deactivated()
})

